<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 + TypeScript 计数器示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f8f9fa;
    }
    #app {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    button {
      background: #42b983;
      color: white;
      border: none;
      padding: 12px 24px;
      margin: 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s;
    }
    button:hover {
      background: #359e6d;
    }
    button.reset {
      background: #64748b;
    }
    button.reset:hover {
      background: #475569;
    }
    h2 {
      color: #2c3e50;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
    }
    .counter {
      font-size: 3em;
      font-weight: bold;
      color: #2c3e50;
      margin: 20px 0;
    }
    .message {
      background: #e3f2fd;
      padding: 15px;
      border-radius: 8px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>Vue 3 + TypeScript 计数器</h2>
    
    <!-- 主计数器显示 -->
    <div class="counter">
      {{ count }}
    </div>
    
    <button @click="increment">增加 (+)</button>
    <button @click="decrement">减少 (-)</button>
    <button class="reset" @click="reset">重置</button>
    
    <!-- 子组件 -->
    <counter-display 
      :count="count" 
      @double="handleDouble"
    ></counter-display>
    
    <div v-if="count >= 10" class="message">
      🎉 恭喜！计数已达到 {{ count }}！
    </div>
  </div>

  <script>
    // 修复问题：使用正确的 Vue 3 Composition API 写法
    const { 
      createApp, 
      ref, 
      computed, 
      onMounted, 
      defineComponent 
    } = Vue;
    
    // 子组件定义
    const CounterDisplay = defineComponent({
      props: {
        count: {
          type: Number,
          required: true
        }
      },
      emits: ['double'], // 声明自定义事件
      setup(props, { emit }) {
        // 计算属性（带类型）
        const squared = computed(() => props.count * props.count);
        
        // 方法
        const doubleCount = () => {
          emit('double');
        };
        
        return {
          squared,
          doubleCount
        };
      },
      template: `
        <div>
          <p>当前计数是: <strong>{{ count }}</strong></p>
          <p>计数的平方是: <strong>{{ squared }}</strong></p>
          <button @click="doubleCount">翻倍</button>
        </div>
      `
    });

    // 主应用
    const App = defineComponent({
      components: {
        CounterDisplay
      },
      setup() {
        // 响应式数据（修复：使用 ref 创建响应式变量）
        const count = ref(0);
        
        // 方法
        const increment = () => {
          count.value++;
        };
        
        const decrement = () => {
          if (count.value > 0) count.value--;
        };
        
        const reset = () => {
          count.value = 0;
        };
        
        const handleDouble = () => {
          count.value *= 2;
        };
        
        // 生命周期钩子
        onMounted(() => {
          console.log('组件已挂载');
        });
        
        // 必须返回模板中使用的所有变量和方法
        return { 
          count, 
          increment, 
          decrement, 
          reset,
          handleDouble
        };
      },
      // 添加模板（关键修复！）
      template: `
        <div>
          <h2>Vue 3 + TypeScript 计数器</h2>
          <div class="counter">{{ count }}</div>
          <button @click="increment">增加 (+)</button>
          <button @click="decrement">减少 (-)</button>
          <button class="reset" @click="reset">重置</button>
          <counter-display :count="count" @double="handleDouble"></counter-display>
          <div v-if="count >= 10" class="message">🎉 恭喜！计数已达到 {{ count }}！</div>
        </div>
      `
    });

    // 创建并挂载应用
    createApp(App).mount('#app');
  </script>
</body>
</html>